<template>
	<view class="content">
		<!-- 顶部标题和返回 -->
		<view class="block_box"></view>
		<view class="top_nav">
			<image @click="backPage" class="nav_img" :src="imgUrl+'/static/wap/img/whiteBack.png'"></image>
			<text>电费</text>
		</view>
		
		<!-- 电费 -->
		<view class="electricity_head">
			<view class="water_fee">
				<view class="fee_one fee_one_special">
					<image class="fee_img" :src="imgUrl+'/static/wap/infoImg/dain@2x.png'"></image>
					<text class="jfName">电费</text>
					<text style="height: 120rpx;">{{date}}</text>
				</view>
				<view class="fee_tow">
					<view class="fee_tow_fl">
						<!-- cost是电费，count是电量嘛 -->
						<text>当前示值（度）</text> <br>
						<text>{{eleData.total_data.total_count||0}}</text>
<!-- 						<text>当前示值（度）</text> <br>
						<text>{{eleData.total_electricity||"0.00"}}</text> -->
					</view>
					<view class="fee_tow_fr">
						<text>已用电费（元）</text> <br>
						<text>{{eleData.total_data.total_cost||0}}</text>
						<!-- <text>{{eleData.year_data[0].cost||0}}</text> -->
					</view>
				</view>
			</view>
		</view>

		<!-- 账单 -->
		<view class="cwater_bill">
			<!-- 账单 上 -->
			<view class="bill_top">
				<view class="bill_top_fl" @click="historyBill">
					<image :src="imgUrl+'/static/wap/infoImg/zhangdan@2x.png'"></image>
					<text>历史账单</text>
				</view>
				<view class="bill_top_fr" @click="energyAna">
					<image :src="imgUrl+'/static/wap/infoImg/fenxi@2x.png'"></image>
					<text>能耗分析</text>
				</view>
			</view>
			
			<!-- 账单 电费中 -->
			<view class="bill_con" >
				<text>当前余额（元）:</text>
				<text>{{electricity_bill_balance||0}}</text>
			</view>
			<view class="bill_con" style="margin-top: 20rpx;">
				<text>结算时间:</text>
				<text>{{eleData.total_data.settlement_time}}</text>
			</view>
			
			<!-- 账单电费 下-->
			<view class="bill_foo" >
				<view class="bill_foo_fl">
					<text>{{year}}年总用电量（度）</text>
					<text>{{eleData.year_data[0].count||0}}</text>
				</view>
				<view class="bill_foo_fr">
					<text>{{year}}年总费用（元）</text>
					<text>{{eleData.year_data[0].cost||0}}</text>
				</view>
			</view>
			<!-- 账单 物业费下-->
			
			<!-- 账单 按钮 -->
			
			<view class="bill_btn" style="background-color: #FC9C3D;" @click="gopay">
				<text>立即缴费</text>
			</view>
		</view>
		<view style="height: 12rpx;width: 100%;background: #F7F9FB;margin-top: 43rpx;"></view>
		<!-- 底部统计图 -->
		<view class="cwater_foo" v-if="type != 3">
			<text>本周用电统计</text>
			<view class="cwater_graph">
				<view class="qiun-bg-white qiun-title-bar">
					<view class="qiun-title-dot-light">电量(度)</view>
				</view>
				<view class="qiun-charts">
					<!-- @touchstart="touchColumn" -->
					<canvas :canvas-id="canvasColumn" :id="canvasColumn" class="charts" ></canvas>
				</view>
				<!-- 遮罩 图列的显示 -->
				<view class="qiun_layer">
				</view>
			</view>
		</view>
		
		<!-- <cmd-progress type="circle" :percent="76" :stroke-width="14" stroke-color="#FC9C3D"></cmd-progress> -->
	</view>
</template>

<script>
	import uCharts from '../../components/u-charts/u-charts.js'
	import cmdProgress from "@/components/cmd-progress/cmd-progress.vue"
	import util from '../../static/util.js'
	let _self;
	let canvaColumn = null;
	export default {
		components: {
			cmdProgress
		},
		data() {
			return {
				imgUrl:util.globalData.imgPre,
				date:'',
				year:'',
				type: '',
				title: '',
				stat: '',
				// 状形图
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				canvasColumn: '1',
				"chartData": {
					"categories": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], 
					// 状图配置
					"series": [{
						"name": "电量(度)",
						"data": [0,0,0,0,0,0,0],
						"color": '#94DC86',
						"textSize": '0', 
					}]
				} ,
				settlementDetails:'',//物业费
				eleData:{
					chart_data:{},
					total_data:{},
					year_data:[{}]
					
				},   //电费
				electricity_bill_balance:0,
			};
		},
		onLoad(opt) {
			this.getTime()
			this.energyAnalysis()
			this.getUserInfo(this.renderPage) 
		},
		methods: {
			renderPage(){
				var  UserInfo = uni.getStorageSync('userInfo');
				this.getData(UserInfo.elc_code)
				this.getBalance()
			},
			getUserInfo(fx){
				var that=this;
				that.ajax({
					url:'api/user/getUserInfo',
					success:function(res){ 
						if(res.code!==200){
							uni.removeStorage({
							    key: 'token',
							    success: function (res) { 
									uni.navigateTo({
										url:'../login/loginWx'
									})
							    }
							});
						} 
						uni.setStorage({
							key:'userInfo',
							data:res.data,
							success(){
								if(fx){
									fx()
								}
							}
						})
					}
				  })
				  },
			getTime:function(){
				var date = new Date(),
				year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate(),
				hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				this.date=year + '.' + month
				
				this.year=year
			},
			// 点击返回上一页
			backPage() {
				uni.navigateBack({
					delta: 1
				})
			},
			gopay(){
				uni.navigateTo({
					url:'../payPage/payPage'
				})
			},
			historyBill(){
				uni.navigateTo({
					url:"../bill/electricityBill"
				})
			},
			energyAna(){
				uni.navigateTo({
					url:"../energyAna/energyAna"
				})
			},
			//按月/按天能耗分析接口
			energyAnalysis(){
				/* var that=this;
				that.ajax({
					url:'api/user/energyAnalysis',
					method:'post',
					data:{
						flag:1
					},
					success:function(res){
						that.settlementDetails=res.data
					}
				  }) */
			},
		
			// 获取电费
			getData(code){
				this.ajax({
					url:'api/bill/costDetails',
					data:{
						code:code,
						type:1
					},
					success:(res)=>{
						if(res.code==101){
							uni.showModal({
								title: '提示',
								content: res.msg,
								success: function (res) {
									if (res.confirm) {
										uni.navigateTo({
											url:'../scanPage/scanPage'
										})
									} else if (res.cancel) {
										uni.switchTab({
										    url: '/pages/index/index'
										});
									}
								}
							});
							
						}else if(res.code!=200){
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							return
						}
						this.eleData=res.data
						this.chartData.series[0].data=res.data.chart_data.ydata
						this.showColumn(this.canvasColumn, this.chartData)
					}
				  })
			},
			getBalance(){
				this.ajax({
					url:'/api/user/costCenter',
					data:{},
					success:(res)=>{
						this.electricity_bill_balance=res.data.electricity_bill_balance
					}
				  })
			},
			// 初始化
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					// 页面组件canvas-id
					canvasId: canvasId,
					// 图表类型
					type: 'column',
					// 是否显示各类别的图例标识
					legend: {
						show: true,
					},
					// 字体大小
					fontSize: 12,
					// 背景颜色
					background: '#FFFFFF',
					// 像素比
					pixelRatio: _self.pixelRatio,
					// 是否动画展示
					animation: true,
					// 图表下方年份
					categories: chartData.categories,
					// 数据
					series: chartData.series,
					// X轴配置
					xAxis: {
						// 表格内竖线不展示
						disableGrid: true,
					},
					// Y轴配置
					yAxis: {
						// 表格内横线不展示
						disableGrid: true,
						min: 0,
						max: 60,
						splitNumber: 5
						
					},
					// 是否在图表中显示数据标签内容值
					dataLabel: true,
					// canvas宽度
					width: _self.cWidth * _self.pixelRatio,
					// canvas高度
					height: _self.cHeight * _self.pixelRatio,
					// 图例
					extra: {
						column: {
							type: 'group',
							width: 10
						}
					}
				});
			
			},
		},
		mounted() {
			_self = this;
			this.cWidth = uni.upx2px(680);
			this.cHeight = uni.upx2px(440);
			this.showColumn(this.canvasColumn, this.chartData)
		}
	}
</script>

<style lang="less" scoped>
	.block_box{
		background: #FB973B;
		height: var(--status-bar-height);
	}
	.content {
		position: relative;
		color: #333;
	}
    .jfName{
		font-size: 36rpx;
	}
	.cwater_head,
	.electricity_head,
	.property_head {
		position: relative;
		height: 355rpx;
		background: url(https://nengyuan.chuangxiangdianli.com/static/wap/infoImg/shui_bg1@2x.png) no-repeat;
		background-size: 100% 100%;

		.water_fee {
			position: absolute;
			top: 180rpx;
			width: 100%;
			height: 358rpx;
			background: url(https://nengyuan.chuangxiangdianli.com/static/wap/infoImg/dian_bg2@2x.png) no-repeat;
			background-size: 100% 100%;

			view {
				margin: 0 36rpx;
				height: 50%;
			}
			.fee_one_special{
				padding-right: 20rpx!important;
			}
			.fee_one {
				line-height: 200rpx;
				font-size: 36rpx;
				
				.fee_img {
					margin: auto 0;
					margin-right: 40rpx;
					margin-top: -2rpx;
					width: 53rpx;
					height: 53rpx;
				}

				& text:nth-child(3) {
					font-size: 28rpx;
					color: #fff;
					float: right;
				}
			}

			.fee_tow {
				display: flex;
				font-size: 30rpx;
				line-height: 60rpx;
				font-weight: bold;
				font-family: PingFang SC Medium, PingFang SC Medium-Medium;
				view {
					height: auto;
					flex: 1;
					 text-align: center; 
					padding-left: 10rpx;
				}
			}
		}
	}

	// 物业费样式
	.property_head {
		background: url(https://nengyuan.chuangxiangdianli.com/static/wap/infoImg/wu_bg1@2x.png) no-repeat;
		background-size: 100% 100%;

		.water_fee {
			background: url(https://nengyuan.chuangxiangdianli.com/static/wap/infoImg/wu_bg2@2x.png) no-repeat;
			background-size: 100% 100%;

			view {
				margin: 0 20rpx;
			}

			.fee_one {
				padding: 0 40rpx;
			}

		}
	}

	// 电费样式
	.electricity_head {
		background: url(https://nengyuan.chuangxiangdianli.com/static/wap/infoImg/dian_bg1@2x.png) no-repeat;
		background-size: 100% 100%;

		.water_fee {
			background: url(https://nengyuan.chuangxiangdianli.com/static/wap/infoImg/dian_bg2@2x.png) no-repeat;
			background-size: 100% 100%;

			view {
				margin: 0 20rpx;
			}

			.fee_one {
				padding: 0 40rpx;
			}

		}
	}

	.cwater_bill {
		margin-top: 160rpx;

		.bill_top {
			padding: 0 38rpx;
			display: flex;
			font-size: 32rpx;
			color: #999;
			height: 130rpx;
			line-height: 130rpx;

			view {
				text-align: center;
				flex: 1;

				image {
					margin-right: 20rpx;
					width: 66rpx;
					height: 66rpx;
				}
			}

		}

		.bill_con {
			display: flex;
			justify-content: space-between;
			padding: 0 38rpx;
			height: 107rpx;
			line-height: 107rpx;
			background-color: #F3F3F5;
			font-size: 32rpx;
		}

		.bill_foo {
			display: flex;
			justify-content: space-between;
			padding: 0 38rpx;
			height: 234rpx;

			view {
				width: 50%;
				text-align: left;
				color: #999;
			}

			.bill_foo_fl {
				font-size: 36rpx;
				color: #11A2F3;

				& text:nth-child(1) {
					display: block;
					margin: 60rpx 0 20rpx 0;
					color: #999;
					font-size: 26rpx;
				}
			}

			.bill_foo_fr {
				position: relative;
				width: 40%;
				font-size: 36rpx;
				color: #FB8F24;

				& text:nth-child(1) {
					display: block;
					margin: 60rpx 0 20rpx 0;
					color: #999;
					font-size: 26rpx;
				}
			}

			.bill_foo_fr::before {
				position: absolute;
				left: -60rpx;
				top: 60rpx;
				content: '';
				width: 1rpx;
				height: 86rpx;
				background-color: #DCDCDC;
				border: 1px solid #DCDCDC;
			}
		}

		.bill_btn {
			margin: 0 auto;
			margin-top: 20rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #fff;
			font-size: 30rpx;
			border-radius: 45rpx;
			background-color: #0C94ED;
			width: 690rpx;
			
		}
	}

	.cwater_foo {
		padding: 30rpx;
		height: 700rpx;
		font-size: 30rpx; 

		text {
			margin-bottom: 60rpx;
			display: block;
		}

		.cwater_graph {
			position: relative;
			height: 420rpx; 
			.qiun_layer{
				position: absolute;
				left: 32%;
				bottom: -40rpx;
				width: 200rpx;
				height: 40rpx;
				background-color: #fff;
			}
		}
	}

	// 顶部返回和标题
	.top_nav {
		position: absolute;
		top: var(--status-bar-height);
		left: 0;
		right: 0;
		height: 80rpx;
		line-height: 80rpx;
		z-index: 10;
		font-size: 36rpx;
		color: #fff;
		text-align: center;

		.nav_img {
			position: absolute;
			top: 20rpx;
			left: 20rpx;
			width: 36rpx;
			height: 36rpx;
		}
	}
	// 状图
	.charts {
		width: 750rpx;
		height: 400rpx;
		background-color: #FFFFFF;
	}
	
	.qiun-title-bar {
		width: 96%;
		padding: 10rpx 2%;
		flex-wrap: nowrap;
	}
	
	// 标题
	.qiun-title-dot-light {
		padding-left: 10rpx;
		font-size: 24rpx;
		color: #666
	}
	
	.qiun-charts {  
		width: 750rpx;
		height: 440rpx;
		background-color: #FFFFFF;
	}
</style>
